import { Component, ErrorInfo, Fragment, ReactNode } from "react";

//声明类型
type Istate = {
    errMsg: string;
    isErr: boolean
}
// 声明props类型
type Iprops = {
    children?: ReactNode
}
class ErrorCom extends Component<Iprops, Istate>{
    state = {
        errMsg: "",//错误信息
        isErr: false //错误状态
    }
    // 从错误中派发状态
    static getDerivedStateFromError(error: string): Istate | null {
        console.log(error);
        if (error) {
            return {
                errMsg: error,
                isErr: true
            }
        }
        return null
    }
    // 组件抓取到错误
    componentDidCatch(error: globalThis.Error, errorInfo: ErrorInfo): void {
        console.log(error);
        console.log(errorInfo);

        // 把这里的错误信息提交给服务器

    }
    render(): ReactNode {
        let { isErr, errMsg } = this.state
        if (isErr) {
            // 如果发送错误，进行降级错误显示
            return <h3>发生了错误:{errMsg}</h3>
        } else {
            // 没有错误，则正常显示组件
            return  this.props.children 
        }

    }
}
export default ErrorCom